<template>
  <div>
    <div class="search-ship-container">
      <el-autocomplete
        ref="autocompleteRef"
        v-model="inputValue"
        value-key="shipName"
        class="center-input"
        popper-class="my-autocomplete-monitor"
        :fetch-suggestions="querySearch"
        placeholder="船舶名称/IMO/MMSI"
        :hide-loading="true"
        @select="handleSelect"
      >
        <div slot="prefix" class="label">
          <img src="@/assets/images/shipping-online/search-icon.png" />
        </div>

        <template slot-scope="{ item }">
          <span
            >{{ item.shipName }}
            {{ item.imo ? `IMO:${item.imo}` : `MMSI:${item.mmsi}` }}</span
          >
        </template>
      </el-autocomplete>
    </div>
  </div>
</template>
<script>
import { queryShipLocations } from "@/api/ship";
export default {
  props: {
    filter: {
      type: Object,
    },
  },
  data() {
    return {
      inputValue: "",
      // testAllList: [],
    };
  },
  mounted() {
    // this.testAllList = this.loadAll();
  },
  methods: {
    querySearch(queryString, cb) {
      if (queryString) {
        queryShipLocations({
          searchValue: queryString,
          ...this.filter,
        }).then((res) => {
          let result = [];
          if (
            res.result &&
            res.result.locationStandardList &&
            res.result.locationStandardList.length > 0
          ) {
            result = res.result.locationStandardList;
          }
          cb(result);
        });
      } else {
        cb([]);
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    doQuery(queryString) {
      return new Promise((resolve, reject) => {
        const result = {
          data: [],
        };
        result.data = this.testAllList.filter((val) => {
          return (
            val.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
          );
        });
        resolve(result);
      });
    },
    loadAll() {
      const testArry = [];
      for (let index = 0; index < 100; index++) {
        testArry.push({
          value: "船舶" + index,
          mmsi: "JSJGES" + index,
          lng: 120 + Math.random(),
          lat: 32 + Math.random(),
        });
      }
      return testArry;
    },
    handleSelect(item) {
      this.$emit("select", item);
      this.inputValue = item.shipName;
    },
    clearInput(ev) {
      this.inputValue = "";
      // 修改响应数据后，nexttick内执行操作
      this.$nextTick(() => {
        // 清空输入后，重新触发搜索
        if (this.$refs.autocompleteRef) {
          this.$refs.autocompleteRef.focus();
        }
      });
    },
  },
};
</script>
<style lang="scss">
.my-autocomplete-monitor{
  background-color: #020d369c!important;
  border: 1px solid #26387c!important;
  &[x-placement^=bottom]{
    margin-top: 9px!important;
  }
  &[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color:transparent!important;
  }
  &[x-placement^=bottom] .popper__arrow{
    border-bottom-color:#26387c!important;
    display: block!important;
  }
  li {
    color: #ffffff!important;
    padding: 10px 20px!important;
  }
  li:hover {
    background: rgba(1, 51, 116, 0.3)!important;
  }
}

</style>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  border: none;
}
::v-deep .el-autocomplete {
  height: 100%;
  width: 100%;
  .el-input {
    height: 100%;
  }

  .el-input__inner {
    border: none;
    padding-left: 55px;
    width:294px;
    height:49px;
    background-color: transparent;
    background-image: url("./images/search-back.png");
    background-size: cover;
    color: #ffffff;
    font-size: 16px;

  }

  .el-input__prefix {
    left: 0px;
  }
  .el-input__suffix {
    right: 0px;
  }
}

// ::v-deep .my-autocomplete {
//   margin-top: 0px !important;
//   border-radius: 0 0 3px 3px;

//   .popper__arrow {
//     display: none !important;
//   }
//   .el-autocomplete-suggestion__wrap {
//     padding: 0px;
//   }
//   li {
//     color: #333333;
//     padding: 10px 20px;
//   }
//   li:hover {
//     background: rgba(0, 74, 170, 0.3);
//   }
// }

.search-ship-container {
  ::v-deep .el-autocomplete-suggestion {
    background-color: #020d369c!important;
    border: 1px solid #26387c;
    .popper__arrow {
      display: none !important;
    }
  }

  .label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 15px 15px 15px 20px;

    img {
      width: 19px;
      height: 19px;
    }

  }
}
</style>
